<template>
  <div class="container">
    <el-form
      :model="details"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row :span="20">
        <el-form-item label="标题" prop="title">
          <el-col :span="10">
            <el-input v-model="details.title"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="介绍" prop="introduce">
          <el-col :span="10">
            <el-input v-model="details.introduce"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="门票" prop="price">
          <el-col :span="10">
            <el-input v-model="details.price"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-col :span="10">
            <el-input v-model="details.city"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="主图" prop="image">
          <Upload :imageUrl="details.image" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-col :span="10">
            <el-select
              v-model="details.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="展示位置" prop="address">
          <el-col :span="10">
            <el-select
              v-model="details.address"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in address_list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getcategory, all_adress } from "@/api/category";
import Upload from "@/components/Upload";
import { update_tarvel, get_travel } from "@/api/travel_list";
export default {
  props: {},
  components: {
    Upload,
  },
  data() {
    return {
      categoryList: [],
      address_list: [],
      details: {},
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        introduce: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        city: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        type: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获取分类
    getCategoryList() {
      getcategory({ type: 1 }).then((res) => {
        this.categoryList = res.data;
      });
    },
    // 获取位置列表
    getAddressList() {
      all_adress({ type: 1 }).then((res) => {
        this.address_list = res.result;
      });
    },
    // 点击提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update_tarvel(this.details).then((res) => {
            // console.log(res);
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置数据
    resetForm() {
      this.$refs[formName].resetFields();
    },
    // 获取数据
    getData_list() {
      get_travel({ id: this.$route.query.id }).then((res) => {
        if(res.code==0){
         this.details = res.result
        }
      });
    },
  },
  mounted() {
    this.getCategoryList();
    this.getAddressList();
    
    // 获取数据
    this.getData_list()
  },
  watch: {},
  computed: {
  },
  filters: {},
};
</script>
<style lang="scss" scoped></style>
